﻿@{
    ViewBag.Title = "Product Sales";
    ViewBag.Header = "Sales";
    ViewBag.Caption = "";
    LineFocus.Nikcron.Models.Lookup Stockhouses = ViewBag.Stockhouses;
    LineFocus.Nikcron.Models.Lookup Retailers = ViewBag.Retailers;
    LineFocus.Nikcron.Models.Lookup Brands = ViewBag.Brands;
    LineFocus.Nikcron.Models.Lookup Accessories = ViewBag.Accessories;
}

@using (Html.BeginForm("Maintenance", "Sales", FormMethod.Post, new { onsubmit = "return ValidateForm();" }))
{
    <div class="col-md-12">

        <div class="box box-danger">
            <div class="box-body">
                <div class="form-group">
                    <label>Invoice Date:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" id="InvoiceDate" name="InvoiceDate" class="form-control bfh-datepicker" value="@DateTime.Today.ToShortDateString()" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="form-group">
                    <label> Stockhouse:</label><span class="astrisk">*</span>
                    <div class="input-group" style="width:100%;">
                        <div class="input-group-addon">
                            <i></i>
                        </div>
                        <select id="Stockhouse" name="Stockhouse" class="selectpicker show-tick" data-hide-disabled="true" title="Select a Stockhouse">
                            @Html.Partial("Dropdown", Stockhouses)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> Retailer:</label><span class="astrisk">*</span>
                    <div class="input-group" style="width:100%;">
                        <div class="input-group-addon">
                            <i></i>
                        </div>
                        <select id="Retailer" name="Retailer" class="selectpicker show-tick" data-hide-disabled="true" title="Select a Retailer">
                            @Html.Partial("Dropdown", Retailers)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                

            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div><!-- /.col (left) -->

    <div class="col-xs-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Add Stocks</h3>
            </div>
            <div class="box-body table-responsive">
                <div class="form-group">
                    <label> IMEI #:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="IMEI" name="IMEI" maxlength="50" type="text" class="form-control" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="form-group">
                    <label> Model#:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="Model" name="Model" type="text" disabled maxlength="100" class="form-control pull-right" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> Unit Price:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="UnitPrice" name="UnitPrice" disabled type="number" maxlength="100" class="form-control pull-right" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="box-footer">
                        <button id="btnIMEI" disabled type="button" onclick="AddItem()" class="btn btn-primary" style=" width:80px;">Add Item</button>
                </div>
                
                
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
    
    <div class="col-xs-6">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Add Accessories</h3>
            </div>
            <div class="box-body table-responsive">
                <div class="form-group">
                    <label> Brand:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <select id="Accessory_Manufacture" name="Accessory_Manufacture" class="selectpicker">
                            @Html.Partial("Dropdown", Brands)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->


                <div class="form-group">
                    <label> Model:</label><span class="astrisk">*</span>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <select id="Accessory_Model" name="Accessory_Model" class="selectpicker" data-hide-disabled="true">
                            @Html.Partial("Dropdown", Accessories)
                        </select>
                    </div><!-- /.input group -->
                </div><!-- /.form group -->

                <div class="form-group">
                    <label> Unit Price:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="Accessory_UnitPrice" name="Accessory_UnitPrice" disabled type="number" maxlength="100" class="form-control pull-right" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="form-group">
                    <label> Qty:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class=""></i>
                        </div>
                        <input id="Accessory_Qty" name="Accessory_Qty" disabled type="number" maxlength="100" class="form-control pull-right" />
                    </div><!-- /.input group -->
                </div><!-- /.form group -->
                <div class="box-footer">
                        <button id="btnAccessory" disabled type="button" onclick="AddAccessoryItem()" class="btn btn-primary" style=" width:80px;">Add Item</button>
                </div>
                
                
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>

    
    <div class="col-md-12">

        <div class="box box-success">
                    <div class="box-footer">
                        <table id="dt_Grid" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th align="center">Product</th>
                                    <th align="center">IMEI#</th>
                                    <th align="center">Unit Price</th>
                                    <th align="center">Qty</th>
                                    <th align="center">Line Total</th>
                                    <th align="center">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody id="dt_Rows"></tbody>
                            <tfoot id="dt_Footer">
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td id="TotalQty" align="center"></td>
                                    <td id="TotalAmount" align="right"></td>
                                    <td>&nbsp;</td>
                                </tr>
                            </tfoot>
                        </table>
                        <input type="hidden" name="Id" id="Id" />
                        <button type="submit" class="btn btn-primary" style=" width:80px;">Save</button>
                        <button type="reset" class="btn btn-primary" style=" width:80px;">Cancel</button>
                    </div>
                </div><!-- /.box -->

        </div><!-- /.box-body -->
        <input type="hidden" id="ModelNos" name="ModelNos" />
    <input type="hidden" id="IMEIs" name="IMEIs" />
        <input type="hidden" id="Qtys" name="Qtys" />
        <input type="hidden" id="UnitPrices" name="UnitPrices" />

}

<script id="dataTable_Grid" type="text/x-jquery-tmpl">
    <tr>
        <td>${Brand} - ${Model}</td>
        <td>${IMEI1}</td>
        <td align="right">${UnitPrice}</td>
        <td align="center">${Qty}</td>
        <td align="right">${LineTotal}</td>
        <td><a onclick="DeleteProduct(${ItemId})">Delete</a></td>
    </tr>
</script>

<script type="text/javascript">
    var productItem;
    var accessoryItem;
    var productItems = [];
    var validProduct = false;
    var firstAdd = true;
    var totalQtys = 0;
    var totalAmt = 0;

    function ShowTotal() {
        totalQtys = 0;
        totalAmt = 0;
        for(var i=0;i<productItems.length;i++)
        {
            totalQtys += productItems[i].Qty;
            totalAmt  += parseFloat(productItems[i].LineTotal);
        }
        $('#TotalQty').html(totalQtys.toString());
        $('#TotalAmount').html(parseFloat(totalAmt).toFixed(2));

        
    }

    function AddAccessoryItem() {
        RequiredDropdown("Accessory_Model", -1, "Select a Accessory Model");
        RequiredTextbox("Accessory_UnitPrice", "Enter Unit Price of the Accessory");
        RequiredTextbox("Accessory_Qty", "Enter No of Qty for the Accessory");
        if(AlertError())
        {
            accessoryItem = {};
            accessoryItem.IMEI1 = "";
            accessoryItem.ItemId = parseInt($('#Accessory_Model').val()) * -1;
            accessoryItem.Brand = $('#Accessory_Manufacture option:selected').text();
            accessoryItem.Model = $('#Accessory_Model option:selected').text();
            accessoryItem.UnitPrice = (parseFloat($('#Accessory_UnitPrice').val())).toFixed(2);
            accessoryItem.Qty = parseInt($('#Accessory_Qty').val());
            accessoryItem.LineTotal = (accessoryItem.UnitPrice * accessoryItem.Qty).toFixed(2);
            console.log($('#Accessory_Manufacture option:selected').text());
            productItems.push(accessoryItem);
            ShowTotal();
            if(firstAdd)
            {
                $.tmpl($('#dataTable_Grid'), productItems).appendTo('#dt_Rows');
                $('#dt_Grid').dataTable({
                    "bPaginate": false,
                    "bLengthChange": true,
                    "bFilter": false,
                    "bSort": false,
                    "bInfo": false,
                    "bAutoWidth": false
                });
                firstAdd = false;
            }
            else
            {
                $('#dt_Rows').html('');
                var tb = $('#dt_Grid').dataTable();
                tb._fnReDraw();
                $.tmpl($('#dataTable_Grid'), productItems).appendTo('#dt_Rows');
            }
            $('#Accessory_Manufacture')[0].selectedIndex = -1;
            $('*[data-id="Accessory_Manufacture"]').prop("title", "");
            $('*[data-id="Accessory_Manufacture"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

            $('#Accessory_Model')[0].selectedIndex = -1;
            $('*[data-id="Accessory_Model"]').prop("title", "");
            $('*[data-id="Accessory_Model"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

            $('#Accessory_Qty').val("");
            $('#Accessory_Qty').attr("disabled",true);
            $('#Accessory_UnitPrice').val("");
            $('#Accessory_UnitPrice').attr("disabled",true);
            $('#btnAccessory').attr("disabled",true);
        }
        else
            return false;
    }
    
    function AddItem() {
        if ($('#IMEI').val() == "") {
            alert("Enter IMEI #");
            return false;
        }
        else if(!validProduct)
        {
            alert("Enter Valid IMEI #");
            return false;
        }
        else
        {
            productItem.UnitPrice =  parseFloat(productItem.UnitPrice).toFixed(2);
            productItem.LineTotal =  parseFloat(productItem.LineTotal).toFixed(2);
            productItems.push(productItem);
            ShowTotal();
            if(firstAdd)
            {
                $.tmpl($('#dataTable_Grid'), productItems).appendTo('#dt_Rows');
                $('#dt_Grid').dataTable({
                    "bPaginate": false,
                    "bLengthChange": true,
                    "bFilter": false,
                    "bSort": false,
                    "bInfo": false,
                    "bAutoWidth": false
                });
                firstAdd = false;
            }
            else
            {
                $('#dt_Rows').html('');
                var tb = $('#dt_Grid').dataTable();
                tb._fnReDraw();
                $.tmpl($('#dataTable_Grid'), productItems).appendTo('#dt_Rows');
            }
        }
        $('#IMEI').val("");
        $('#Model').text("");
        $('#UnitPrice').text("");
        $('#UnitPrice').attr("disabled",true);
        $('#btnIMEI').attr("disabled",true);
    }

    function DeleteProduct(ProductItemId)
    {
        for(var i=0;i<productItems.length;i++){
            if(productItems[i].ItemId == ProductItemId)
            {
                productItems.splice(i,1);
            }
        }
        $('#dt_Rows').html('');
        var tb = $('#dt_Grid').dataTable();
        tb._fnReDraw();
        $.tmpl($('#dataTable_Grid'), productItems).appendTo('#dt_Rows');
        ShowTotal();
        return false;
    }

    $('#IMEI').change(function() {
        if ($(this).val() != "") {
            var url = '@Url.Action("GetProductItemDetailsForSales", "Sales")';
            url += "?IMEINo="+$('#IMEI').val();
            $.getJSON(url, function (result) {
                if(result != null && result != undefined){
                    productItem = result[0];
                    var mn = result[0].Brand + "-" + result[0].Model;
                    console.log(mn);
                    $('#Model').val(mn);
                    $('#UnitPrice').val(parseFloat(result[0].UnitPrice).toFixed(2));
                    $('#Model').removeAttr("disabled");
                    $('#UnitPrice').removeAttr("disabled");
                    validProduct = true;
                    $('#btnIMEI').removeAttr("disabled");
                }
                else{
                    productItem = undefined;
                    $('#Model').val("");
                    $('#UnitPrice').val("");
                    $('#Model').attr("disabled",true);
                    $('#UnitPrice').attr("disabled",true);
                    validProduct = false;
                    $('#btnIMEI').attr("disabled",true);
                }
                    
            });
            return false;
        }
        else {
            validProduct = false;
            $('#Model').text("");
            $('#UnitPrice').text("");
            $('#UnitPrice').attr("disabled",true);
            alert("Enter IMEI #");
            $('#btnIMEI').attr("disabled",true);
            return false;
        }
    });

    function ValidateForm() {
        
        RequiredDropdown("Stockhouse", -1, "Select a Stockhouse");
        RequiredDropdown("Retailer", -1, "Select a Retailer");
        if(productItems.length <= 0)
            AddErrorMsg("Add at least one Product")
        else
        {
            var models = "";
            var qtys = "";
            var imei = "";
            var unitPrices = "";
            for(var i=0;i<productItems.length;i++)
            {
                if(i!=0)
                {
                    models += ",";
                    qtys += ",";
                    imei += ",";
                    unitPrices += ",";
                }
                models += productItems[i].ItemId;
                imei += productItems[i].IMEI1;
                qtys += productItems[i].Qty;
                unitPrices += productItems[i].UnitPrice;
            }
            $('#ModelNos').val(models);
            $('#Qtys').val(qtys);
            $('#UnitPrices').val(unitPrices);
            $('#IMEIs').val(imei);
        }
        return AlertError();
    }

    $('#Stockhouse').change(function () {
        $('.Stockhouse').removeAttr("disabled");
        $('.Stockhouse').prop("disabled", "true");
        $('.Stockhouse_' + $('#Stockhouse').val()).removeAttr("disabled");
        $('#Retailer').removeAttr("disabled");
        $('#Retailer').selectpicker('deselectAll');
        $('#Retailer').selectpicker("render");
        $('#Retailer').selectpicker("refresh");
        $('#Retailer')[0].selectedIndex = -1;
        $('*[data-id="Retailer"]').prop("title", "");
        $('*[data-id="Retailer"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');
    });

    $('#Accessory_Manufacture').change(function () {
        $('.Manufacture').removeAttr("disabled");
        $('.Manufacture').prop("disabled", "true");
        $('.Manufacture_' + $('#Accessory_Manufacture').val()).removeAttr("disabled");
        $('#Accessory_Model').removeAttr("disabled");
        $('#Accessory_Model').selectpicker('deselectAll');
        $('#Accessory_Model').selectpicker("render");
        $('#Accessory_Model').selectpicker("refresh");
        $('#Accessory_Model')[0].selectedIndex = -1;
        $('*[data-id="Accessory_Model"]').prop("title", "");
        $('*[data-id="Accessory_Model"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');
    });
    
    $('#Accessory_Model').change(function () {
        var url = '@Url.Action("GetPriceDetailsByModelId", "Product")?ModelId=';
        url += $('#Accessory_Model').val();
        $.getJSON(url, function (result) {
            $('#Accessory_UnitPrice').val(parseFloat(result).toFixed(2));
            $('#Accessory_Qty').val("1");
            $('#Accessory_UnitPrice').removeAttr("disabled");
            $('#Accessory_Qty').removeAttr("disabled");
            validProduct = true;
            $('#btnAccessory').removeAttr("disabled");
            
        });
    });

    $(document).ready(function () {
        $('.selectpicker').selectpicker();

        $('#InvoiceDate').datepicker();

        $('#Stockhouse')[0].selectedIndex = -1;
        $('*[data-id="Stockhouse"]').prop("title", "");
        $('*[data-id="Stockhouse"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Retailer')[0].selectedIndex = -1;
        $('*[data-id="Retailer"]').prop("title", "");
        $('*[data-id="Retailer"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Accessory_Manufacture')[0].selectedIndex = -1;
        $('*[data-id="Accessory_Manufacture"]').prop("title", "");
        $('*[data-id="Accessory_Manufacture"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');

        $('#Accessory_Model')[0].selectedIndex = -1;
        $('*[data-id="Accessory_Model"]').prop("title", "");
        $('*[data-id="Accessory_Model"]').html('<span class="filter-option pull-left" />&nbsp;<span class="caret" />');


    });
</script>

